<template>
    <div class="content-container">
        <ToolHeader
                title="一个在线的小型工具箱"
                subtitle="可以在导航栏中选择需要的功能"
        />
    </div>

    <div class="content-container">
        <div class="info-header">
            <div class="left-title">
                <h2>首页</h2>
            </div>
            <div class="right-title">
                <div class="clickable-home" @click="goHome">
                    <el-icon>
                        <Discount/>
                    </el-icon>
                    <span class="right-title-text">首页</span>
                </div>
                <span class="small-toolbox-text"> || 小型工具箱</span>
            </div>
        </div>

        <el-row :gutter="16" class="overview-cards">
            <el-col
                    :xs="24"
                    :sm="12"
                    :md="8"
                    :lg="6"
                    :xl="4"
                    v-for="item in overview"
                    :key="item.label"
            >
                <el-card shadow="hover" class="overview-card">
                    <div class="corner-deco top-left" :style="{ backgroundColor: item.color }"/>
                    <div class="corner-deco bottom-right" :style="{ backgroundColor: item.color }"/>

                    <div class="card-inner">
                        <div class="card-left">
                            <el-icon :size="36" class="card-icon">
                                <component :is="item.icon"/>
                            </el-icon>
                        </div>
                        <div class="card-right">
                            <div class="card-label">{{ item.label }}</div>
                            <div class="card-number">
                                {{
                                typeof item.value === 'object' && 'value' in item.value ? item.value.value : item.value
                                }}
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>

    <div class="content-container">
        <div class="tool-section">
            <h2 class="section-title">可用工具</h2>
            <el-row :gutter="16">
                <el-col
                        :xs="24"
                        :sm="12"
                        :md="8"
                        :lg="6"
                        :xl="4"
                        v-for="tool in tools"
                        :key="tool.title"
                >
                    <el-card
                            class="tool-card"
                            @click="goTo(tool.path)"
                            shadow="hover"
                            style="cursor:pointer;"
                    >
                        <div class="tool-card-content">
                            <div class="tool-icon-wrapper" :style="{ backgroundColor: tool.bgColor }">
                                <el-icon class="tool-icon">
                                    <component :is="tool.icon"/>
                                </el-icon>
                            </div>
                            <div class="tool-text">
                                <div class="tool-title">{{ tool.title }}</div>
                                <div class="tool-count">
                                    {{ tool.count.value }}
                                    个工具
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import ToolHeader from '@/components/ToolHeader.vue'
import {
    Tools,
    UserFilled,
    Calendar,
    Histogram,
    Discount,
    Aim,
    Document,
    FolderAdd,
} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
import {get} from '@/net/index.js'
import {ref, onMounted, computed} from "vue"

const router = useRouter()
const goHome = () => router.push('/')

// 各分类工具数量
const codeCount = ref(0)
const lifeCount = ref(0)
const textCount = ref(0)
const mathCount = ref(0)
const toolTotal = ref(0)

// 用户数量
const accountCount = ref(0)

//今日访问量
const todayVisit = ref(0)
//总访问量
const totalVisit = ref(0)

const updateToolTotal = () => {
    toolTotal.value =
        (codeCount.value ?? 0) +
        (lifeCount.value ?? 0) +
        (textCount.value ?? 0) +
        (mathCount.value ?? 0)
}

// 请求工具数量并更新总数
const fetchCodeToolCount = () => {
    get('/api/codeTool/getCodeToolList', (data) => {
        codeCount.value = data.length
        updateToolTotal()
    })
}

const fetchLifeToolCount = () => {
    get('/api/lifeTool/getLifeToolList', (data) => {
        lifeCount.value = data.length
        updateToolTotal()
    })
}

const fetchTextToolCount = () => {
    get('/api/textTool/getTextToolList', (data) => {
        textCount.value = data.length
        updateToolTotal()
    })
}

const fetchMathToolCount = () => {
    get('/api/mathTool/getMathToolList', (data) => {
        mathCount.value = data.length
        updateToolTotal()
    })
}

const fetchAccountCount = () => {
    get('/api/auth/getAccountCount', (data) => {
        accountCount.value = data
    })
}

const fetchVisitStats = () => {
    get('/api/stats/visit', (data) => {
        todayVisit.value = data.today || 0
        totalVisit.value = data.total || 0
    })
}

const goTo = (path) => router.push(path)

const overview = computed(() => [
    {label: '工具数量', value: toolTotal, icon: Tools, color: '#409EFF'},
    {label: '用户数量', value: accountCount, icon: UserFilled, color: '#67C23A'},
    {label: '今日访问', value: todayVisit, icon: Calendar, color: '#E6A23C'},
    {label: '总使用量', value: totalVisit, icon: Histogram, color: '#F56C6C'},
])

// 工具卡片数据
const tools = [
    {title: '编程工具', icon: Aim, count: codeCount, bgColor: '#409EFF', path: '/index/CodeTool'},
    {title: '生活工具', icon: Calendar, count: lifeCount, bgColor: '#67C23A', path: '/index/LifeTool'},
    {title: '文本工具', icon: Document, count: textCount, bgColor: '#E6A23C', path: '/index/TextTool'},
    {title: '数学工具', icon: FolderAdd, count: mathCount, bgColor: '#F56C6C', path: '/index/MathTool'},
]

onMounted(() => {
    fetchCodeToolCount()
    fetchLifeToolCount()
    fetchTextToolCount()
    fetchMathToolCount()
    fetchAccountCount()
    fetchVisitStats()
})
</script>

<style scoped>
.content-container {
    padding: 1.5rem 1rem;
    max-width: 90rem;
    min-width: 320px;
    margin: 0 auto;
}

.info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: var(--el-text-color-primary);
}

.left-title h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.right-title {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: var(--el-text-color-primary);
    gap: 0.5rem;
    font-weight: 500;
}

.clickable-home {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--el-text-color-primary);
    transition: color 0.25s ease;
}

.clickable-home:hover {
    color: #409EFF;
}

.clickable-home el-icon {
    font-size: 1.25rem;
}

.small-toolbox-text {
    user-select: none;
    color: var(--el-text-color-disabled);
    font-size: 0.9rem;
}

/* overview 卡片统一高度 */
.overview-cards {
    margin-bottom: 0.5rem;
}

.overview-card {
    min-height: 130px;
    padding: 0.5rem;
    border-radius: 0.6rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
    background: var(--el-bg-color-overlay);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 0.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.overview-card:hover {
    box-shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, 0.15);
    transform: translateY(-0.2rem);
}

.corner-deco {
    position: absolute;
    opacity: 0.2;
    z-index: 0;
}

.corner-deco.top-left {
    width: 3rem;
    height: 2.3rem;
    top: 0;
    left: 0;
    border-radius: 0 0 100% 0;
}

.corner-deco.bottom-right {
    width: 4.5rem;
    height: 4rem;
    bottom: 0;
    right: 0;
    border-radius: 100% 0 0 0;
}

.card-inner {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: nowrap;
}

.card-icon {
    font-size: 2rem;
    color: #409EFF;
    flex-shrink: 0;
}

.card-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--el-text-color-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-number {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--el-color-primary);
    line-height: 1.2;
    white-space: nowrap;
}

/* 工具卡片统一高度 */
.tool-section {
    margin-top: 0.5rem;
    padding: 0;
}

.section-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
    color: var(--el-text-color-primary);
}

.tool-card {
    min-height: 110px;
    border-radius: 1rem;
    padding: 0.8rem;
    transition: all 0.3s ease;
    background-color: var(--el-bg-color-overlay);
    box-shadow: 0 0.06rem 0.25rem rgba(0, 0, 0, 0.05);
    margin-bottom: 0.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tool-card:hover {
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.12);
}

.tool-card:hover .tool-title {
    color: #409EFF;
    transition: color 0.3s ease;
}

.tool-card-content {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.tool-icon-wrapper {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.8rem;
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.tool-icon {
    font-size: 1.5rem;
    color: white;
}

.tool-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tool-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--el-text-color-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-count {
    font-size: 0.8rem;
    color: var(--el-text-color-secondary);
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .tool-text {
        font-size: 0.85rem;
    }

    .card-label {
        font-size: 0.85rem;
    }

    .card-number {
        font-size: 1.1rem;
    }
}
</style>